<template>
  <div class="login-bachgroud text-center">
    <img src="../assets/bac.png" style="margin-top: 5.4%;  height:702px; width:768px;margin-left: 9%;">
    <div class="row">
      <div class="cord-body">
        <h4 class="caption">PLC数据监控平台</h4>
        <div class="aaA">
          <div class="glyphicon">
            <svg-icon :icon-class="'user'" style="cursor: pointer;color:#248dc1;font-size:20px;"></svg-icon><span style="position: relative;    top: 18%;left: 20%;color:#248dc1;">|</span>
          </div>
         <input type="text" v-model="login_name" placeholder="   请输入账号"><!--使用v-model 双向绑定-->
        </div>
        <div class="bb">
          <div class="glyphicon">
            <svg-icon :icon-class="'password'" style="cursor: pointer;color:#248dc1;font-size:20px;"></svg-icon><span style="position: relative;    top: 18%;left: 20%;color:#248dc1;">|</span>
          </div>
         <input :type="this.passShow?'text':'password'" v-model="pwd" placeholder="   请输入密码">

        <!--通过data中的passShow来控制是否显示密码 用:type的形式可以直接使用JavaScript表达式来动态定义 -->
        <!--使用svg-icon 为公用的矢量图使用模块 通过icon-class 来来选择导入的矢量图 所有矢量图全部存放在@/icons/svg下 如果需要添加新的矢量图全部放入此处-->
        <svg-icon :icon-class="this.passShow?'eye-open':'eye'" @click.native="showPass" style="cursor: pointer;color:#248dc1;font-size:22px;"></svg-icon>
        </div>
        <div class="cc">
        <!--显示密码的按钮也需要进行对应的变动 -->
         <el-button type="success" class="elbutton"  @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {getUserInfo} from "../utils/auth";
  export default {
    name: "login",
    /*
    * 在vue中定义需要使用到的数据
    * 定义方式必须为：
    data(){
      return {
       数据1：xx，
       数据2：xx
      };
       }
      该定义方式用等同于
      data:function(){
      return{}
      }
      因此之后出现的 函数名（）{
      } 都相当于
      函数名:function(){}
    * */
    /*
    *
    * */
    data() {
      return {
        login_name: '',
        pwd: '',
        passShow: false
      }
    },
    created: function() {
      var _this = this;
      document.onkeydown = function(e) {
        let key = window.event.keyCode;
        if (key == 13) {
          _this.submit();
        }
      };
    },
    methods: {
      submit: function (e) {
        //登陆的时候判断当前登陆的是PC端还是手机端
       /* if( navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
          alert(navigator.userAgent.match(/(phone)/i));
          alert("移动端");
          /!*compponents.$router.replace('/pc_index');*!/
        }else {
          alert(navigator.userAgent.match(/(phone)/i));
          alert("pc端");
          /!*compponents.$router.replace('/m_index');*!/
        }*/
        let compponents = this;//声明一个变量赋值为this，以便在axios.post方法的作用域中使用。
        const h = this.$createElement;
        compponents.$axios.post('/signIn', {loginName: this.login_name, pwd: this.pwd}).then(function (response) {
          /*发送输入的登陆名和密码到后台。后台则返回用户信息以及生成的token*/
          let result = response.data;
          if (result.success) {
            let {userInfo} = result;//{userInfo} = result 的语法形式 等同于 let userInfo=result.userInfo
            let {token} = result;
            compponents.$store.dispatch('user/setToken', token); //通过调用Stroe中的user modules 声明的 setToken 将token 在vuex中定义 以便后期随时调用
            compponents.$store.dispatch('user/setUserInfo', userInfo);//通过调用Stroe中的user modules 声明的 setUserInfo 将t用户信息 在vuex中定义 以便后期随时调用
            compponents.$router.push('/');
            compponents.$message({
              message: h('p', null, [
                h('i', {style: 'color: green'}, '通过: '),
                h('i', {style: 'color: blue'}, `登录成功喽`)
              ])
            });
          } else {
            compponents.$message({
              message: h('p', null, [
                h('i', {style: 'color: red'}, '错误: '),
                h('i', {style: 'color: gray'}, result.message)
              ])
            });
          }
        })
          .catch(function (error) {
            compponents.$message({
              message: h('p', null, [
                h('i', {style: 'color: red'}, '错误: '),
                h('i', {style: 'color: gray'}, error)
              ])
            });
          });


      },
      showPass() {
        this.passShow = !this.passShow

      }
    }

  }
</script>

<style scoped>
  .login-bachgroud {
    background: url(../assets/bac1.png) no-repeat;
    background-size: 100% 100%;
    margin: 0;
    background-position: 0% 42%;
    min-width: 1024px;
    min-height: 600px;
    display: flex!important;
    height: 937px;
    width:1920px;

  }
  .text-center {
    text-align: center!important;
  }
  .row{
    border-radius: 3px;
    width: 467px;
    height: 470px;
    margin-top: 213px;
    margin-left: 1265px;
    background-color: rgba(1,53,97,0.5);
    position: absolute;
    border: solid 1px #1075b0;
    box-shadow: 0px 20px 40px 0px rgba(5, 192, 255, 0.2) inset;
  }
  .caption{
    font-family: tikinFont;
    margin: 0px;
    margin-bottom: 8%;
    color: #00befe;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 4px;
  }
  .cord-body{
    padding-top: 3%;
    padding-bottom: 45px;
    height: 460px;
    flex: 1 1 auto;
    padding: 4rem 1.5rem 4rem 1.5rem;
  }

  input{
    border: solid 1px #248dc1;
    color: #248dc1;
    background: #001a40;
    height: 41px;
    border-radius: 22px;
    font-size: 16px;
    padding-left: 80px;
    font-family: tikinFont;
    width: 281px;
    outline: none;
  }
  button{
    border-radius: 22px;
    background: linear-gradient(to right,#07a6e3,#05b6f5);
    border-color: #5294ee;
    height: 45px;
    font-size: 18px;
    font-family: tikinFont;
    width: 363px;
  }
  .glyphicon{
     width: 11%;
    height: 10.6%;
    border-radius: 5px 0px 0px 5px;
    position: relative;
    top: 34.8px;
    left: -39.26%;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #c8c8c8c8;
    font-size: 22px;
    -webkit-font-smoothing: antialiased;
  }
  .aaA {
    margin: 0px 20px 2% 20px;
  }
  .bb{
    margin: 0px 0px 15% 20px;
  }
  .cc{
    margin: 0px 20px 2% 20px;
  }
  /*el-button*/
  .elbutton:hover{
    background: linear-gradient(to right,#07a6e3,#05b6f5);
    border-color: #5294ee;
  }
  input:focus {
    border-color: #5294ee;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px #5294ee, 0 0 8px #5294ee;
    box-shadow: inset 0 1px 1px #5294ee, 0 0 8px #5294ee;
  }
  .el-button--success {
    color: #FFF;
    background: linear-gradient(to right,#07a6e3,#05b6f5);
    border-color: #07a6e3;
  }
</style>
